<template>
  <div>
    <div v-if="open">
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog
        :title="title"
        center
        :visible="open"
        :modal="open"
        @close="close()"
        width="50%"
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item :label="$t('authority.dictInfo.form.dictLabel')" prop="dictLabel">
            <el-input v-model="form.dictLabel" :placeholder="$t('authority.dictInfo.rules.dictLabelPLH')" />
          </el-form-item>
          <el-form-item :label="$t('authority.dictInfo.form.dictNumber')" prop="dictCode">
            <el-input v-model="form.dictCode" :placeholder="$t('authority.dictInfo.rules.dictNumberPLH')" />
          </el-form-item>
          <el-form-item :label="$t('authority.dictInfo.form.dictOption')" prop="dictValue">
            <el-input v-model="form.dictValue" :placeholder="$t('authority.dictInfo.rules.dictOptionPLH')" />
          </el-form-item>
          <el-form-item :label="$t('authority.dictInfo.form.dictOptionSort')" prop="dictSort">
            <el-input
              type="number"
              v-model="form.dictSort"
              :placeholder="$t('authority.dictInfo.rules.dictOptionSortPLH')"
              max="9999"
              min="1"
            />
          </el-form-item>
<!--          <el-form-item :label="$t('authority.dictInfo.form.listStyle')" prop="dictName">-->
<!--            <el-input v-model="form.cssClass" :placeholder="$t('authority.dictInfo.rules.listCssPLH')" />-->
<!--          </el-form-item>-->
          <el-form-item :label="$t('authority.dictInfo.form.remark')" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :placeholder="$t('authority.dictInfo.rules.remarkPLH')"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">{{ $t("common.confirm") }}</el-button>
          <el-button @click="close">{{ $t("common.cancel") }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getData, saveOrUpdateData } from "@/api/authority_app/dict/data";
export default {
  name: "DataInfo",
  data() {
    return {
      form: {},
      // 表单校验
      rules: {
        dictLabel: [
          {
            required: true,
            message: this.$t("authority.dictInfo.rules.dictLabelNoEmpty"),
            trigger: "blur",
          },
          {
            max: 100,
            message: '字典标签最长100位',
            trigger: "blur",
          },
        ],
        dictCode: [
          {
            required: true,
            message: this.$t("authority.dictInfo.rules.dictNumberNoEmpty"),
            trigger: "blur",
          },
          {
            max: 64,
            message: '字典编码最长64位',
            trigger: "blur",
          },
        ],
        dictValue: [
          {
            required: true,
            message: this.$t("authority.dictInfo.rules.dictOptionNoEmpty"),
            trigger: "blur",
          },
          {
            max: 100,
            message: '字典项值最长100位',
            trigger: "blur",
          },
        ],
        dictSort: [
          {
            required: true,
            message: this.$t("authority.dictInfo.rules.dictSortNoEmpty"),
            trigger: "blur",
          },
          {
            max: 4,
            message: '字典项顺序最长4位',
            trigger: "blur",
            type: 'string'
          }
        ],
      },
    };
  },
  props: {
    dataId: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    open: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    //重置表单
    this.reset();
    //执行预新增或者预修改
    if (this.dataId && this.dataId != "") {
      getData(this.dataId).then((res) => {
        this.form = res.result;
        this.form.dictSort = this.form.dictSort.toString();
        console.log( typeof  this.form.dictSort)

      });
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: "",
        dictCode: "",
        dictLabel: "",
        dictSort: "",
        dictType: "",
        dictValue: "",
        listClass: "",
        status: "",
      };
      this.resetForm("form");
    },
    // 取消按钮
    close() {
      this.reset();
      this.$emit("changeDataInfoOpen", false);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //先保存子项修改
          delete this.form.createTime;
          delete this.form.updateTime;
          saveOrUpdateData(this.form).then((res) => {
            this.msgSuccess(this.$t("common.operateSuccess"));
            this.close();
          });
        }
      });
    },
  },
};
</script>
